<template>
  <div class="dog">
    <h2>上面的求和为：{{ sum }}，{{ bigSchool }}</h2>
    <button @click="getDog">再来一条狗</button>
    <br>
    <img v-for="dog in dogs" :key="dog.id" :src="dog.url" alt="">
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
  export default {
    name:'Dog',
    computed: {
      ...mapState(['dogs','sum']),
      ...mapGetters(['bigSchool'])
    },
    methods: {
      getDog(){
        this.$store.dispatch('addDog')
      }
    },
  }
</script>

<style scoped>
  .dog {
    background-color: orange;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  img {
    height: 100px;
    margin-right: 10px;
  }
</style>